<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<cw:base />
		<script type="text/javascript">
			function getSexData() {
				return [ [ 1, '男' ], [ 2, '女' ] ];
			}
			
			function showImage(v,m,r) {
		 		return "<img src=<s:url value='/'/>" + v + "></img>";
		  	}
		</script>
	</head>
	<body>
		<ul>
			<li>
				<cw:fieldSet title="前台统计" content="countGrid1Div" collapsible="true" collapsed="false"/>
				<div id="countGrid1Div">
					<cw:grid id="countGrid1" title="" url="${pageContext.request.contextPath }/sample/grid/grid.query.action"
						enablePage="true" exportable="false" selectMode="checkbox" urlParams="{id:0}" stripeRows="true" stripleColor="#DBEEF4" 
						autoLoad="true" showGlobalStat="true" summaryText="平均值" forceFit="true" pageSize="5">
						<cw:indexColumn indexWidth="60"/>
						<cw:gridColumn property="name" width="10%" title="姓名" align="center"/>
						<cw:gridColumn property="email" width="15%" align="center"/>
						<cw:gridColumn property="age" width="10%" title="年龄" summaryType="average" summaryDecimalPrecision="0" align="center"/>
						<cw:gridColumn property="birthday" width="15%" dataType="date" format="Y-m-d" align="center"/>
						<cw:gridColumn property="sex" width="10%" rendererData="getSexData()" align="center"/>
						<cw:gridColumn property="created" width="15%" title="创建时间" dataType="date" format="Y-m-d" align="center"/>
					</cw:grid>
				</div>
			</li>
		</ul>
		<hr>
		<ul>
			<li>
				<cw:fieldSet title="后台统计" content="countGrid2Div" collapsible="true" collapsed="false"></cw:fieldSet>
				<div id="countGrid2Div">
					<cw:grid id="countGrid2" title="" url="${pageContext.request.contextPath }/sample/grid/gridpage.querySummary.action"
						enablePage="true" exportable="false" selectMode="checkbox" urlParams="{id:0}" stripeRows="true" stripleColor="#DBEEF4" 
						autoLoad="true" showGlobalStat="true" summaryText="平均值" remoteGlobalStat="true" forceFit="true" pageSize="5">
						<cw:indexColumn indexWidth="60"/>
						<cw:gridColumn property="name" width="10%" title="姓名" align="center"/>
						<cw:gridColumn property="email" width="15%" align="center"/>
						<cw:gridColumn property="age" width="10%" title="年龄" summaryType="average" summaryDecimalPrecision="0" align="center"/>
						<cw:gridColumn property="birthday" width="15%" dataType="date" format="Y-m-d" align="center"/>
						<cw:gridColumn property="sex" width="10%" rendererData="[[1,'男'],[2,'女']]" align="center"/>
						<cw:gridColumn property="created" width="15%" title="创建时间" dataType="date" format="Y-m-d" align="center"/>
					</cw:grid>
				</div>
			</li>
		</ul>
		<hr>
		<ul>
			<li>
				<cw:fieldSet title="表格列渲染" content="countGrid3Div" collapsible="true" collapsed="false"></cw:fieldSet>
				<div id="countGrid3Div">
					<cw:grid id="countGrid3" title="" url="${pageContext.request.contextPath }/sample/grid/grid.query.action"
						enablePage="true" exportable="false" selectMode="checkbox" urlParams="{id:0}" stripeRows="true" stripleColor="#DBEEF4" 
						autoLoad="true" showGlobalStat="true" summaryText="平均值" rowSelectSummary="true" forceFit="true" pageSize="5">
						<cw:indexColumn indexWidth="60"/>
						<cw:gridColumn property="name" width="10%" title="姓名" align="center"/>
						<cw:gridColumn property="email" width="15%" align="center"/>
						<cw:gridColumn property="age" width="10%" title="年龄" summaryType="average" summaryDecimalPrecision="0" align="center"/>
						<cw:gridColumn property="birthday" width="15%" dataType="date" format="Y-m-d" align="center"/>
						<cw:gridColumn property="sex" width="10%" rendererData="[[1,'男'],[2,'女']]" align="center"/>
						<cw:gridColumn property="created" width="15%" title="创建时间" dataType="date" format="Y-m-d" align="center"/>
					</cw:grid>
				</div>
			</li>
		</ul>
		<cw:theme></cw:theme>
		<script type="text/javascript">
			Ext.onReady(function(){
				var STORE1 = Ext.getCmp('countGrid1').store;
				STORE1.on("load",function(s,r,o){
					resetHeight("countGridFrame");
			    });
				
				var STORE2 = Ext.getCmp('countGrid2').store;
				STORE2.on("load",function(s,r,o){
					resetHeight("countGridFrame");
			    });
				
				var STORE3 = Ext.getCmp('countGrid3').store;
				STORE3.on("load",function(s,r,o){
					resetHeight("countGridFrame");
			    });
				
				resetHeight("countGridFrame");
			})
		
			function resetHeight(frame) {
				var ifm = parent.document.getElementById(frame);
				var obj = document.body;
				var oStyle = obj.currentStyle? obj.currentStyle : window.getComputedStyle(obj, false);
				var initHeight = parseInt(document.body.clientHeight+parseInt(oStyle["margin-top"])+parseInt(oStyle["margin-bottom"]));
				ifm.height = parseInt(initHeight);
			}
		</script>
	</body>
</html>